import React, { Fragment } from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux';

import _ from 'lodash';
import printJS from 'print-js';

import { Modal } from 'antd';

const borderLeft = {
  borderLeft: '0px solid #fff',
};

const borderRight = {
  borderRight: '1px solid #adadad',
};
const lineHeight = {
  lineHeight: '32px',
  height: '32px',
};

const batchDetail = {
  width: '100%',
  border: '1px solid #ADADAD',
  borderRight: '0px solid #adadad',
  borderBottom: 'none',
};

interface PrintElemProps {
  dispatch?: Dispatch;
  detail: any;
  printInfo: any;
  detailInfo?: any;
  printVisible?: boolean;
}

@connect(({ logisCenterBatchList: { detailInfo, printVisible } }: any) => ({
  detailInfo,
  printVisible,
}))

class PrintElemInfo extends React.Component<PrintElemProps> {
  handlePrintOrder = () => {
    printJS({
      printable: 'billDetails',
      type: 'html',
      targetStyles: ['*'],
      onPrintDialogClose: () => '关闭',
      onError: error => error,
    });
  };

  handleCancelModal = () => {
    const { dispatch }: any = this.props;
    dispatch({
      type: 'logisCenterBatchList/changePrint',
      payload: false,
    });
  };

  renderTable = (payment: any, paymentList: any, type: any) => (
    <Fragment>
      <thead>
        <tr style={{ ...lineHeight, fontSize: 14 }}>
          <th colSpan={9} style={borderRight}>
            {type === 1 ? '已付款订单' : '未付款订单'}({paymentList.length})
          </th>
        </tr>
      </thead>
      <tbody>
        <tr style={lineHeight}>
          <td style={borderLeft}>序号</td>
          <td>快递单号</td>
          <td>金额(元)</td>
          <td>序号</td>
          <td>快递单号</td>
          <td>金额(元)</td>
          <td>序号</td>
          <td>快递单号</td>
          <td>金额(元)</td>
        </tr>
        {payment.map((item: any, index: number) => (
          <tr key={Math.random()} style={lineHeight}>
            {item.map((newItem: any, newIndex: number) => (
              <Fragment key={newItem.id + Math.random()}>
                <td
                  style={{
                    borderLeft: `${newIndex % 3 === 0 ? '0px solid #fff' : '1px solid #ADADAD'}`,
                  }}
                >
                  NO.{index * 3 + newIndex + 1}
                </td>
                <td>{newItem.expCode}</td>
                <td>{(newItem.payment / 100).toFixed(2)}</td>
              </Fragment>
            ))}
            {item.length < 3
              && [...new Array(3 - item.length)].map((newItem: any) => (
                <Fragment key={newItem}>
                  <td />
                  <td />
                  <td />
                </Fragment>
              ))}
          </tr>
        ))}
      </tbody>
    </Fragment>
  );

  render() {
    const { printInfo, detailInfo, printVisible } = this.props;
    const { list = [] } = detailInfo;

    const paymentList = list.filter((item: any) => item.payment <= 0);
    const noPaymentList = list.filter((item: any) => item.payment > 0);

    const new_paymentList = [...paymentList];
    const payMapCount = Math.ceil(new_paymentList.length / 3);
    const payment = [];

    while (payment.length < payMapCount) {
      payment.push(new_paymentList.splice(0, 3));
    }

    const new_noPaymentList = [...noPaymentList];
    const noPayment = [];
    const noPayMapCount = Math.ceil(new_noPaymentList.length / 3);

    while (noPayment.length < noPayMapCount) {
      noPayment.push(new_noPaymentList.splice(0, 3));
    }

    return (
      <Modal
        title="打印接驳订单"
        visible={printVisible}
        destroyOnClose
        width={1200}
        wrapClassName="Modal"
        okText="打印"
        onOk={this.handlePrintOrder}
        onCancel={this.handleCancelModal}
      >
        <div id="billDetails" style={batchDetail}>
          <table
            className="batchTable"
            cellPadding="0"
            cellSpacing="0"
            style={{
              width: '100%',
              borderCollapse: 'collapse',
              textAlign: 'center',
              fontSize: 12,
            }}
          >
            <thead>
              <tr>
                <td
                  colSpan={6}
                  style={{
                    fontSize: '20px',
                    fontWeight: 'bold',
                    borderCollapse: 'collapse',
                    lineHeight: '200%',
                    border: 'none',
                    borderRight: '1px solid #ADADAD',
                  }}
                >
                  《{printInfo.logisName}接驳明细单》
                </td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td
                  colSpan={6}
                  style={{
                    borderLeft: '0px solid #fff',
                    paddingLeft: 20,
                    color: 'red',
                    textAlign: 'left',
                  }}
                >
                  【警示！】请快递公司在接驳前提前剔除易碎件、生鲜品、保质期短的物品，
                  如未提前剔除或告知，造成收件人退件、投诉、索赔，由快递公司自负。
                  若快递公司提前告知我方收件人已承诺收件，且已签订《承诺单》，我方可接驳。
                </td>
              </tr>
              <tr style={lineHeight}>
                <td style={borderLeft}>快递公司</td>
                <td>{printInfo.expressName}</td>
                <td>接驳批次</td>
                <td>第{printInfo.seqNo}批次</td>
                <td>接驳时间</td>
                <td>{printInfo.batchDate}</td>
              </tr>
              <tr style={lineHeight}>
                <td style={borderLeft}>快件总量</td>
                <td>{printInfo.scanCount}</td>
                <td>其中:货到付款</td>
                <td
                  colSpan={3}
                  style={{
                    fontWeight: 600,
                  }}
                >
                  {printInfo.scanCount - printInfo.deliveredCount}件 金额:
                  {(printInfo.paymentAmount / 100).toFixed(2)}元
                </td>
              </tr>
              <tr style={lineHeight}>
                <td style={borderLeft}>快递公司确认签字</td>
                <td colSpan={2} />
                <td>近邻宝确认签字/签字日期</td>
                <td colSpan={2} />
              </tr>
            </tbody>
          </table>

          <table
            className="batchTable"
            cellPadding="0"
            cellSpacing="0"
            style={{
              width: '100%',
              borderCollapse: 'collapse',
              fontSize: 12,
              textAlign: 'center',
            }}
          >
            {this.renderTable(payment, paymentList, 1)}
            {this.renderTable(noPayment, noPaymentList, 2)}

            <thead>
              <tr>
                <th colSpan={9} />
              </tr>
            </thead>
          </table>
        </div>
      </Modal>
    );
  }
}

export default PrintElemInfo;
